.elg-pager {
    --elg-pager-text-color: var(--elg-text-color-primary);
    --elg-pager-text-active-color: var(--primary);
    --elg-pager-text-font-size: var(--elg-font-size-base);
    --elg-pager-text-hover-color: var(--primary);
    --elg-pager-icon-disable:var(--elg-disabled-text-color);
    --elg-pager-bg-color:transparent;
    --elg-pager-size:30px;
    --elg-trans-back:rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    
    a {
        margin: 0 3px;
        color: inherit;
        font-size: var(--elg-pager-text-font-size);
        font-weight: bold;
        cursor: pointer;
        height: var(--elg-pager-size);
        width: var(--elg-pager-size);
        background-color:var(--elg-pager-bg-color) ;
        display:inline-flex;
        justify-content: center;
        align-items: center;
        border-radius: 2px;
        &.active {
            color: var(--elg-pager-text-active-color);
            cursor: auto;

        }

        &:hover {
            color: var(--elg-pager-text-hover-color);

        }
        .elg-pager-icon-disabled{
            color:var(--elg-pager-icon-disable);
        cursor: not-allowed;

        }
        &.prev:hover {
            .prev-icon{
                display: block;
                font-weight: 200;
            }
            .textinfo{
                display: none;
            }
        }
        &.next:hover{
            .next-icon{
                display: block;
                font-weight: 200;
            }
            .textinfo{
                display: none;
            }
        }
    }

}
@each $val in primary,warning,danger,info,success{
    .elg-pager-#{$val}{
        // --elg-pager-bg-color:var(--#{$val});
        // --elg-pager-bg-color:var(--elg-fill-color-dark);
        --elg-pager-bg-color:var(--elg-trans-back);

        
        a.active{
            --elg-pager-bg-color: var(--#{$val});
            --elg-pager-text-active-color:#fff;
            
        }
        a:hover{
            --elg-pager-text-hover-color:var(--#{$val});
            &.active{
            --elg-pager-text-hover-color:#fff;

            }
        }

    }
}
.elg-pager-small{
    --elg-pager-size:20px;
    --elg-pager-text-font-size:var(--elg-font-size-extra-small);
}
.elg-pager-large{
    --elg-pager-size:33px;
    --elg-pager-text-font-size:var( --elg-font-size-medium);
}
.next-icon,.prev-icon{
    display: none;
}